<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/css/app/prism-css.css" rel="stylesheet" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        body {
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
        }

        #container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        #top {
            background-color: white;
            height: 50%;
            min-height: 30px;
            overflow: hidden;
            position: relative;
        }

        #top iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        #dragbar {
            height: 15px;
            background-color: #333;
            cursor: row-resize;
            z-index: 2;
        }

        #bottom {
            background-color: #282a36;
            flex-grow: 1;
            min-height: 30px;
            overflow: auto; /* Changed from hidden to auto */
            display: flex;
            flex-direction: row;
        }

        #bottom-left {
            background-color: #282a36;
            flex-basis: 50%;
            min-width: 30px;
            overflow: auto; /* Changed from hidden to auto */
            display: flex;
            flex-direction: column;
            position:relative;
        }

        .editor {
            flex-grow: 1;
            width: 100%;
            height: 100%;
            background-color: #333333;
        }

        #vdragbar {
            width: 15px;
            background-color: #333;
            cursor: col-resize;
        }

        #bottom-right {
            background-color: transparent;
            flex-grow: 1;
            min-width: 30px;
            overflow: auto;
        }

        .vertical-layout #container {
            flex-direction: row;
        }

        .vertical-layout #top {
            width: 50%;
            height: 100%;
            min-width: 30px;
            min-height: 100%;
        }

        .vertical-layout #dragbar {
            width: 15px;
            height: 100%;
            cursor: col-resize;
        }

        .btn {
            outline: none;
            background-color: transparent;
            color:lightgray;
            margin:6px;
            font-size: 1.3rem;
            padding-left:15px;
            padding-right:15px;
            padding-top:5px;
            padding-bottom: 5px;
            border-radius: 5px;
            border:1px solid lightgray;
            cursor: pointer;
        }

        .vertical-layout #bottom {
            flex-direction: column;
            width: 50%;
            height: 100%;
        }

        .vertical-layout #vdragbar {
            width: 100%;
            height: 15px;
            cursor: row-resize;
        }

        .bottom-right-menu > button.active {
            border:1px solid red;
        }

        div.bottom-content-container > div {
            display:none;
        }

        div.bottom-content-container > div.active {
            display:block;
            color: lightgray;
            margin:8px;
        }

        .bottom-right, .bottom-left {
            background-color:#282a36;
            border:1px solid lightgray;
        }

        .bottom-left-menu {
            background-color: transparent;
            display: flex;
            position: sticky;
            top:0;
            left:0;
            z-index:10001;
            width: 100%;
        }

        .bottom-left-menu .btn {
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap:5px;
        }

        .bottom-left-menu .btn.active {
            background-color: #000000;
            color:white;
            font-weight: bold;
        }

        #component_tree ul.tree {
            list-style: none;
            padding-left: 20px;
            font-family: sans-serif;
        }

        #component_tree .tree-item {
            margin: 4px 0;
            cursor: pointer;
        }

        #component_tree .toggle-button {
            font-weight: bold;
            margin-right: 6px;
            cursor: pointer;
            color: #007BFF;
        }

        #component_tree .hidden {
            display: none;
        }

        #demo_data .tree {
            font-family: monospace;
            line-height: 1.6;
        }
        #demo_data .node {
            margin-left: 20px;
            position: relative;
        }
        #demo_data .toggle {
            cursor: pointer;
            display: inline-block;
            width: 16px;
            text-align: center;
            margin-right: 6px;
            color: white;
            font-weight: bold;
        }
        #demo_data .key {
            color: white;
        }
        #demo_data .value {
            color: lightgreen;
        }
        #demo_data .hidden {
            display: none;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            height: 100%;
        }

        .CodeMirror {
            height: 100%;
            min-height: 100px;
        }

        .CodeMirror-scroll {
            overflow: auto !important;
        }

        .tree-node {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
            font-family: Arial, sans-serif;
        }

        .node-title {
            display: flex;
            align-items: center;
            color: #1a1a1a;
            font-size: 1rem;
            padding: 0.25rem 0;
            cursor: pointer;
        }

        .toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            margin-right: 0.75rem;
            padding: 0.25rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .toggle-btn:hover {
            background-color: #f0f0f0;
        }

        .icon {
            width: 1rem;
            height: 1rem;
            stroke: #4a4a4a;
            stroke-width: 2;
        }

        .node-children {
            margin-left: 1.5rem;
            border-left: 1px solid #d1d5db;
            padding-left: 0.75rem;
        }

        .node-title span {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .node-title span:hover, .toggle-btn:hover {
            background-color: #4a4a4a;
            color:white;
        }

        .toggle-btn:hover .icon {
            stroke: white;
        }

        .node-title span {
            background-color: #e5e7eb;
        }

        .toggle-btn {
            background-color: #e5e7eb;
        }

        /* Center the spinner on the page */
        .spinner-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.8); /* Semi-transparent overlay */
            z-index: 9999; /* Ensure it’s on top */
        }

        /* Spinner animation */
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3; /* Light gray border */
            border-top: 4px solid #3498db; /* Blue top border for animation */
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Hide spinner by default when content is loaded */
        .spinner-container.hidden {
            display: none;
        }

    </style>
</head>
<body>

<div class="spinner-container" id="spinner">
    <div class="spinner"></div>
</div>

<div id="container">
    <div id="top">
        <iframe id="previewIframe" src="/demo/{{ $component->slug }}/index.html" title="Preview Iframe"></iframe>
    </div>
    <div id="dragbar"></div>
    <div id="bottom">
        <div id="bottom-left">
            <div class="bottom-left-menu">
                @foreach($component->componentTypes as $key => $type)
                    <button class="btn {{ $key == 0 ? 'active' : '' }}" data-key="{{ $type['framework'] }}">
                        @if($type['framework'] === 'vue')
                            <svg t="1746584925820" class="icon" viewBox="0 0 1186 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4925" width="24" height="24"><path d="M869.52386204 159.15885416H1052.78178049L594.63698399 949.45862779 136.4921875 159.15885416h350.48076905L594.63698399 342.41677261 700.01028734 159.15885416h169.5135747z" fill="#41B883" p-id="4926"></path><path d="M136.4921875 159.15885416l458.14479649 790.29977362L1052.78178049 159.15885416h-183.25791845L594.63698399 633.33871848 317.45938184 159.15885416H136.4921875z" fill="#41B883" p-id="4927"></path><path d="M317.45938184 159.15885416L594.63698399 635.62944258 869.52386204 159.15885416h-169.5135747L594.63698399 342.41677261 486.97295655 159.15885416H317.45938184z" fill="#35495E" p-id="4928"></path></svg>
                        @endif
                        @if($type['framework'] === 'react')
                            <svg t="1746585431449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9489" width="24" height="24"><path d="M512 431.36c43.946667 0 79.786667 35.84 79.786667 80.64 0 42.666667-35.84 78.933333-79.786667 78.933333S432.213333 554.666667 432.213333 512c0-44.8 35.84-80.64 79.786667-80.64M314.453333 853.333333c26.88 16.213333 85.76-8.533333 153.6-72.533333-22.186667-25.173333-43.946667-52.48-64.426666-81.066667a968.533333 968.533333 0 0 1-102.4-15.36c-21.76 91.306667-13.653333 154.026667 13.226666 168.96m30.293334-244.906666l-12.373334-21.76c-4.693333 12.373333-9.386667 24.746667-12.373333 36.693333 11.52 2.56 24.32 4.693333 37.546667 6.826667l-12.8-21.76m279.04-32.426667l34.56-64-34.56-64c-12.8-22.613333-26.453333-42.666667-38.826667-62.72C561.92 384 537.6 384 512 384s-49.92 0-72.96 1.28c-12.373333 20.053333-26.026667 40.106667-38.826667 62.72L365.653333 512l34.56 64c12.8 22.613333 26.453333 42.666667 38.826667 62.72 23.04 1.28 47.36 1.28 72.96 1.28s49.92 0 72.96-1.28c12.373333-20.053333 26.026667-40.106667 38.826667-62.72M512 289.28c-8.106667 9.386667-16.64 19.2-25.173333 30.72h50.346666c-8.533333-11.52-17.066667-21.333333-25.173333-30.72m0 445.44c8.106667-9.386667 16.64-19.2 25.173333-30.72h-50.346666c8.533333 11.52 17.066667 21.333333 25.173333 30.72M709.12 170.666667c-26.453333-16.213333-85.333333 8.533333-153.173333 72.533333 22.186667 25.173333 43.946667 52.48 64.426666 81.066667 34.986667 3.413333 69.546667 8.533333 102.4 15.36 21.76-91.306667 13.653333-154.026667-13.653333-168.96m-29.866667 244.906666l12.373334 21.76c4.693333-12.373333 9.386667-24.746667 12.373333-36.693333-11.52-2.56-24.32-4.693333-37.546667-6.826667l12.8 21.76m61.866667-300.8c62.72 35.84 69.546667 130.133333 43.093333 240.213334 108.373333 32 186.453333 84.906667 186.453334 157.013333s-78.08 125.013333-186.453334 157.013333c26.453333 110.08 19.626667 204.373333-43.093333 240.213334-62.293333 35.84-147.2-5.12-229.12-83.2-81.92 78.08-166.826667 119.04-229.546667 83.2-62.293333-35.84-69.12-130.133333-42.666666-240.213334-108.373333-32-186.453333-84.906667-186.453334-157.013333s78.08-125.013333 186.453334-157.013333c-26.453333-110.08-19.626667-204.373333 42.666666-240.213334 62.72-35.84 147.626667 5.12 229.546667 83.2 81.92-78.08 166.826667-119.04 229.12-83.2M728.746667 512c14.506667 32 27.306667 64 37.973333 96.426667 89.6-26.88 139.946667-65.28 139.946667-96.426667s-50.346667-69.546667-139.946667-96.426667c-10.666667 32.426667-23.466667 64.426667-37.973333 96.426667M295.253333 512c-14.506667-32-27.306667-64-37.973333-96.426667-89.6 26.88-139.946667 65.28-139.946667 96.426667s50.346667 69.546667 139.946667 96.426667c10.666667-32.426667 23.466667-64.426667 37.973333-96.426667m384 96.426667l-12.8 21.76c13.226667-2.133333 26.026667-4.266667 37.546667-6.826667-2.986667-11.946667-7.68-24.32-12.373333-36.693333l-12.373334 21.76m-123.306666 172.373333c67.84 64 126.72 88.746667 153.173333 72.533333 27.306667-14.933333 35.413333-77.653333 13.653333-168.96-32.853333 6.826667-67.413333 11.946667-102.4 15.36-20.48 28.586667-42.24 55.893333-64.426666 81.066667M344.746667 415.573333l12.8-21.76c-13.226667 2.133333-26.026667 4.266667-37.546667 6.826667 2.986667 11.946667 7.68 24.32 12.373333 36.693333l12.373334-21.76m123.306666-172.373333C400.213333 179.2 341.333333 154.453333 314.453333 170.666667c-26.88 14.933333-34.986667 77.653333-13.226666 168.96a968.533333 968.533333 0 0 1 102.4-15.36c20.48-28.586667 42.24-55.893333 64.426666-81.066667z" fill="#00BCD4" p-id="9490"></path></svg>
                        @endif

                        @if($type['framework'] === 'blade')
                            <svg t="1746605257082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4947" width="24" height="24"><path d="M1020.39936 521.088c-6.784-7.616-100.544-125.44-117.056-145.472a29.184 29.184 0 0 0-34.752-14.912c-10.176 1.472-128.832 21.504-142.592 23.808s-22.464 7.872-14.016 19.776l102.72 145.984-310.016 74.624L258.03136 211.2a29.248 29.248 0 0 0-34.176-18.688c-22.336 0.896-193.472 15.104-205.632 16.192s-25.6 6.4-13.376 35.328 206.528 449.152 211.904 461.376a41.6 41.6 0 0 0 52.48 24.128c33.792-8.128 150.976-38.848 214.976-55.68 33.792 61.504 102.848 186.176 115.584 204.096 17.024 23.872 28.736 19.904 54.912 11.968 20.416-6.4 319.488-114.176 332.8-119.68s21.76-9.536 12.8-23.104c-6.4-9.92-85.568-116.032-126.912-171.52l139.648-37.376c12.8-3.392 14.208-9.536 7.424-17.216zM456.62336 636.8c-3.712 0.768-177.408 42.56-186.688 44.8s-9.28 1.024-10.304-2.112S53.10336 250.88 50.28736 245.568s-2.688-9.536 0-9.536 164.032-14.528 169.728-14.784 5.12 0.896 7.168 4.544L458.73536 627.2c4.032 6.4 1.6 8.768-2.112 9.536z m489.728 92.096c2.752 4.352 5.504 7.168-3.2 10.304s-293.952 99.776-299.52 102.4-9.92 3.2-17.024-7.168-99.904-171.52-99.904-171.52l302.336-79.232c7.488-2.368 9.92-3.968 14.656 3.584s99.84 137.152 102.4 141.568z m19.2-215.424c-6.784 1.472-117.824 29.12-117.824 29.12l-90.624-125.056c-2.56-3.584-4.672-7.232 1.664-8.064s109.504-19.584 114.176-20.608a11.2 11.2 0 0 1 14.4 5.568c5.696 7.808 84.224 107.52 87.168 111.168s-2.112 6.4-8.896 7.616z" fill="#E87537" p-id="4948"></path></svg>
                        @endif
                        <span>{{ $type['framework'] }}</span>
                    </button>
                @endforeach
            </div>

            @foreach($component->componentTypes as $key => $type)
                <div id="tab-content{{ $type["framework"] }}" class="tab-content {{ $type['framework'] === 'vue' ? 'active' : '' }}">
                    <pre><code class="language-javascript" contenteditable="true"></code></pre>
                </div>
            @endforeach
        </div>
        <div id="vdragbar"></div>
        <div id="bottom-right">
            <div class="bottom-right-menu">
                <button class="btn active" data-key="description">Description</button>
                @if($component["component_tree"])
                    <button class="btn" data-key="component_tree">component tree</button>
                @endif
                @if($component["demo_data"])
                    <button class="btn" data-key="demo_data">Demo data</button>
                @endif
            </div>

            <div class="bottom-content-container">
                <div id="description" class="active">
                    {!! $component["description_html"] !!}
                </div>

                @if($component["component_tree"])
                    <div id="component_tree"></div>
                @endif
                @if($component["demo_data"])
                    <div id="demo_data"></div>
                @endif
            </div>
        </div>
    </div>
</div>

@foreach($component->componentTypes as $key => $type)
    <textarea id="{{ $type["framework"] }}" class="hidden-editor" style="display:none;">{{ $type["code"] }}</textarea>
@endforeach

<script src="/js/app/prism-script.js"></script>
<script>
    const dragbar = document.getElementById("dragbar");
    const topDiv = document.getElementById("top");
    const container = document.getElementById("container");
    const iframe = document.getElementById("previewIframe");
    const bottom = document.getElementById("bottom");
    const vdragbar = document.getElementById("vdragbar");
    const bottomLeft = document.getElementById("bottom-left");
    const bottomRightButtons = document.querySelectorAll(".bottom-right-menu button");
    const upBottomLayout = '<svg t="1749009697449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6049" width="24" height="24"><path d="M192 160a32 32 0 0 0-32 32v640c0 17.664 14.336 32 32 32h640a32 32 0 0 0 32-32v-640a32 32 0 0 0-32-32h-640z m-96 32A96 96 0 0 1 192 96h640a96 96 0 0 1 96 96v640a96 96 0 0 1-96 96h-640a96 96 0 0 1-96-96v-640z" p-id="6050" fill="#ffffff"></path><path d="M96 512a32 32 0 0 1 32-32h768a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32z" p-id="6051" fill="#ffffff"></path><path d="M128 416a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0v-128A32 32 0 0 1 128 416zM896 416a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0v-128a32 32 0 0 1 32-32z" p-id="6052" fill="#ffffff"></path></svg>'
    const singlePagelayout = '<svg t="1748237054330" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11705" width="24" height="24"><path d="M331.050667 85.333333h361.898666c34.346667 0 62.72 0 85.76 1.877334 24.021333 1.962667 46.08 6.186667 66.773334 16.725333a170.666667 170.666667 0 0 1 74.581333 74.581333c10.538667 20.693333 14.762667 42.752 16.725333 66.730667C938.666667 268.373333 938.666667 296.704 938.666667 331.008v361.941333c0 34.346667 0 62.72-1.877334 85.76-1.962667 24.021333-6.186667 46.08-16.725333 66.773334a170.666667 170.666667 0 0 1-74.581333 74.581333c-20.693333 10.538667-42.752 14.762667-66.730667 16.725333-23.082667 1.877333-51.456 1.877333-85.76 1.877334H331.008c-34.346667 0-62.72 0-85.76-1.877334-24.021333-1.962667-46.08-6.186667-66.773333-16.725333a170.666667 170.666667 0 0 1-74.581334-74.581333c-10.538667-20.693333-14.762667-42.752-16.725333-66.730667C85.333333 755.626667 85.333333 727.296 85.333333 692.992V331.008c0-34.346667 0-62.72 1.877334-85.76 1.962667-24.021333 6.186667-46.08 16.725333-66.773333a170.666667 170.666667 0 0 1 74.581333-74.581334c20.693333-10.538667 42.752-14.762667 66.730667-16.725333C268.373333 85.333333 296.704 85.333333 331.008 85.333333zM252.16 172.288c-18.688 1.493333-28.288 4.266667-34.944 7.68a85.333333 85.333333 0 0 0-37.290667 37.290667c-3.413333 6.656-6.186667 16.213333-7.68 34.944C170.666667 271.402667 170.666667 296.234667 170.666667 332.8v358.4c0 36.565333 0 61.397333 1.621333 80.597333 1.493333 18.688 4.266667 28.288 7.68 34.944a85.333333 85.333333 0 0 0 37.290667 37.290667c6.656 3.413333 16.213333 6.186667 34.944 7.68C271.402667 853.333333 296.234667 853.333333 332.8 853.333333h358.4c36.565333 0 61.397333 0 80.597333-1.621333 18.688-1.493333 28.288-4.266667 34.944-7.68a85.333333 85.333333 0 0 0 37.290667-37.290667c3.413333-6.656 6.186667-16.213333 7.68-34.944 1.578667-19.2 1.621333-44.032 1.621333-80.597333V332.8c0-36.565333 0-61.397333-1.621333-80.597333-1.493333-18.688-4.266667-28.288-7.68-34.944a85.333333 85.333333 0 0 0-37.290667-37.290667c-6.656-3.413333-16.213333-6.186667-34.944-7.68C752.597333 170.666667 727.765333 170.666667 691.2 170.666667H332.8c-36.565333 0-61.397333 0-80.597333 1.621333z" p-id="11706" fill="#ffffff"></path></svg>'
    const desktopIcon = '<svg t="1746344116369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13781" width="24" height="24"><path d="M899.544477 127.981836 123.664507 127.981836c-32.962739 0-59.683311 28.626991-59.683311 63.943334l0 447.601294c0 35.31532 26.720571 63.943334 59.683311 63.943334l358.098841 0-119.366621 191.82898 298.41553 0-119.366621-191.82898 358.098841 0c32.962739 0 59.683311-28.626991 59.683311-63.943334L959.227788 191.925171C959.227788 156.608827 932.508239 127.981836 899.544477 127.981836zM899.544477 575.583131c0 35.31532-26.720571 63.943334-59.683311 63.943334L183.347818 639.526465c-32.962739 0-59.683311-28.626991-59.683311-63.943334L123.664507 255.867482c0-35.31532 26.720571-63.943334 59.683311-63.943334L839.862189 191.924147c32.962739 0 59.683311 28.626991 59.683311 63.943334L899.5455 575.583131z" fill="#ffffff" p-id="13782"></path></svg>'


    let isDragging = false;
    let isVDragging = false;
    let isBottomVisible = true;
    let isVerticalLayout = false;
    let storedWidth = "50%";
    let storedHeight = "50%";


    window.parent.document.addEventListener("click", (event) => {

        let parent = event.target.parentElement;

        if(parent.id === 'toggleLayout'){
            if (isVerticalLayout) {
                storedWidth = topDiv.style.width || "50%";
            } else {
                storedHeight = topDiv.style.height || "50%";
            }

            isVerticalLayout = true
            document.body.classList.toggle("vertical-layout", isVerticalLayout);
            document.getElementById("bottom").style.display = "flex"

            resetIframeSize();

            setupDragbars();

            setTimeout(() => {
                if (isVerticalLayout) {
                    topDiv.style.width = '430px';
                    topDiv.style.height = "100%";
                } else {

                    topDiv.style.height = "50%";
                    storedHeight = "50%";
                    topDiv.style.width = "100%";
                }
                resetIframeSize();
            }, 10);
        }

        if(parent.id === 'toggleTablet'){
            if (isVerticalLayout) {
                storedWidth = topDiv.style.width || "50%";
            } else {
                storedHeight = topDiv.style.height || "50%";
            }

            isVerticalLayout = true
            document.body.classList.toggle("vertical-layout", isVerticalLayout);
            document.getElementById("bottom").style.display = "flex"

            resetIframeSize();

            setupDragbars();

            setTimeout(() => {
                if (isVerticalLayout) {
                    topDiv.style.width = '1024px';
                    topDiv.style.height = "100%";
                } else {

                    topDiv.style.height = "50%";
                    storedHeight = "50%";
                    topDiv.style.width = "100%";
                }
                resetIframeSize();
            }, 10);
        }

        if(parent.id === 'toggleBottom'){
                isBottomVisible = !isBottomVisible;

                if (isBottomVisible) {
                    bottom.style.display = isVerticalLayout ? "flex" : "flex";
                    dragbar.style.display = "block";
                    if (isVerticalLayout) {
                        topDiv.style.width = storedWidth;
                    } else {
                        topDiv.style.height = storedHeight;
                    }

                    window.parent.document.getElementById("toggleBottom").innerHTML = desktopIcon

                } else {
                    bottom.style.display = "none";
                    dragbar.style.display = "none";
                    if (isVerticalLayout) {
                        topDiv.style.width = "100%";
                    } else {
                        topDiv.style.height = "100%";
                    }

                    window.parent.document.getElementById("toggleBottom").innerHTML = upBottomLayout

                }
                resetIframeSize();
        }

        if(parent.id === 'addToFavorite'){
            console.log('add to favorite')
        }

        if(parent.id === 'addToProject'){

            const save_project = '{{ route('save.project') }}'
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch(save_project, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                },
                credentials: "include",
                body: JSON.stringify({
                    _token: csrfToken,
                    component_type_id: 1,
                    project_id: 1,
                }),
            })
                .then((res) => res.json())
                .then((data) => console.log(data))
                .catch((err) => console.error("Error:", err));
        }

        if(parent.id === 'addToFavorite'){
            const save_favorite = '{{ route('save.favorite') }}'
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch(save_favorite, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                },
                credentials: "include",
                body: JSON.stringify({
                    _token: csrfToken,
                    component_id: 1,
                }),
            })
                .then((res) => res.json())
                .then((data) => console.log(data))
                .catch((err) => console.error("Error:", err));
        }

    });


    bottomRightButtons.forEach(button => {
        button.addEventListener("click", () => {
            bottomRightButtons.forEach(btn => btn.classList.remove("active"));
            button.classList.add("active");

            const key = button.getAttribute("data-key");
            document.querySelectorAll(".bottom-content-container > div").forEach(div => {
                div.classList.remove("active");
            });
            document.getElementById(key).classList.add("active");
        });
    });

    const editors = document.querySelectorAll(".tab-content");
    const editorBtns = document.querySelectorAll(".bottom-left-menu > .btn");
    editorBtns.forEach(button => {
        button.addEventListener('click', () => {
            editorBtns.forEach(b => b.classList.remove('active'));
            editors.forEach(c => c.classList.remove('active'));

            button.classList.add('active');
            const tabId = button.getAttribute('data-key');
            document.getElementById(`tab-content${tabId}`).classList.add('active');

            createEditor(tabId);
        });
    });

    if (document.getElementById("toggleLayout")) {
        document.getElementById("toggleLayout").addEventListener("click", function(event){
            event.preventDefault();

            if (isVerticalLayout) {
                storedWidth = topDiv.style.width || "50%";
            } else {
                storedHeight = topDiv.style.height || "50%";
            }

            isVerticalLayout = true
            document.body.classList.toggle("vertical-layout", isVerticalLayout);
            document.getElementById("bottom").style.display = "flex"

            resetIframeSize();

            setupDragbars();

            setTimeout(() => {
                if (isVerticalLayout) {
                    topDiv.style.width = '430px';
                    topDiv.style.height = "100%";
                } else {

                    topDiv.style.height = "50%";
                    storedHeight = "50%";
                    topDiv.style.width = "100%";
                }
                resetIframeSize();
            }, 10);
        });
    }

    if (document.getElementById("toggleTablet")) {
        document.getElementById("toggleTablet").addEventListener("click", function(event){

            event.preventDefault();

            if (isVerticalLayout) {
                storedWidth = topDiv.style.width || "50%";
            } else {
                storedHeight = topDiv.style.height || "50%";
            }

            isVerticalLayout = true
            document.body.classList.toggle("vertical-layout", isVerticalLayout);
            document.getElementById("bottom").style.display = "flex"

            resetIframeSize();

            setupDragbars();

            setTimeout(() => {
                if (isVerticalLayout) {
                    topDiv.style.width = '1024px';
                    topDiv.style.height = "100%";
                } else {

                    topDiv.style.height = "50%";
                    storedHeight = "50%";
                    topDiv.style.width = "100%";
                }
                resetIframeSize();
            }, 10);

        });
    }

    function resetIframeSize() {

        iframe.style.width = '100%';
        iframe.style.height = '100%';

        setTimeout(() => {
            iframe.contentWindow.postMessage('resize', '*');
        }, 50);
    }

    function escapeBrackets(str) {
        return str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    function setupDragbars() {
        document.body.style.cursor = "";
        if(!dragbar){
            return;
        }
        dragbar.onmousedown = null;
        vdragbar.onmousedown = null;
        document.onmousemove = null;
        document.onmouseup = null;

        if (isVerticalLayout) {

            dragbar.addEventListener("mousedown", (e) => {
                isDragging = true;
                document.body.style.cursor = "col-resize";
                iframe.style.pointerEvents = 'none';
                e.preventDefault();
            });

            document.addEventListener("mousemove", (e) => {
                if (!isDragging) return;

                const containerRect = container.getBoundingClientRect();
                let newTopWidth = e.clientX - containerRect.left;

                const minWidth = 30;
                const maxTopWidth = container.clientWidth - minWidth - 15;

                if (newTopWidth < minWidth) newTopWidth = minWidth;
                if (newTopWidth > maxTopWidth) newTopWidth = maxTopWidth;

                topDiv.style.width = `${newTopWidth}px`;
                storedWidth = `${newTopWidth}px`;

                resetIframeSize();
            });
        } else {
            dragbar.addEventListener("mousedown", (e) => {
                isDragging = true;
                document.body.style.cursor = "row-resize";
                iframe.style.pointerEvents = 'none';
                e.preventDefault();
            });

            document.addEventListener("mousemove", (e) => {
                if (!isDragging) return;

                const containerOffsetTop = container.offsetTop;
                let newTopHeight = e.clientY - containerOffsetTop;

                const minHeight = 30;
                const maxTopHeight = container.clientHeight - minHeight - 15;

                if (newTopHeight < minHeight) newTopHeight = minHeight;
                if (newTopHeight > maxTopHeight) newTopHeight = maxTopHeight;

                topDiv.style.height = `${newTopHeight}px`;
                topDiv.style.width = '100%';
                storedHeight = `${newTopHeight}px`;
                resetIframeSize();
            });
        }

        document.addEventListener("mouseup", () => {
            if (isDragging) {
                isDragging = false;
                document.body.style.cursor = "";
                iframe.style.pointerEvents = 'auto';
            }
        });

        vdragbar.addEventListener("mousedown", (e) => {
            isVDragging = true;
            document.body.style.cursor = isVerticalLayout ? "row-resize" : "col-resize";
            e.preventDefault();
        });



        document.addEventListener("mousemove", (e) => {
            if (!isVDragging) return;

            if (isVerticalLayout) {

                const bottomRect = bottom.getBoundingClientRect();
                let newTopHeight = e.clientY - bottomRect.top;

                const minHeight = 30;
                const maxHeight = bottom.clientHeight - minHeight - 15;

                if (newTopHeight < minHeight) newTopHeight = minHeight;
                if (newTopHeight > maxHeight) newTopHeight = maxHeight;

                bottomLeft.style.flexBasis = `${newTopHeight}px`;
            } else {

                const bottomRect = bottom.getBoundingClientRect();
                let newLeftWidth = e.clientX - bottomRect.left;

                const minWidth = 30;
                const maxWidth = bottom.clientWidth - minWidth - 15;

                if (newLeftWidth < minWidth) newLeftWidth = minWidth;
                if (newLeftWidth > maxWidth) newLeftWidth = maxWidth;

                bottomLeft.style.flexBasis = `${newLeftWidth}px`;
            }

        });

        document.addEventListener("mouseup", () => {
            if (isVDragging) {
                isVDragging = false;
                document.body.style.cursor = "";
            }
        });
    }

    setupDragbars();

    function detectLanguage(content) {
        if (/<[a-z][\s\S]*>/i.test(content)) return "htmlmixed";
        if (/<\?php|<\?=/i.test(content)) return "php";
        if (/(^|\s)(\.|#)?[a-z][a-z0-9-]*\s*\{[^}]*\}/i.test(content)) return "css";
        if (/(^|\s)(function|let|const|var|class|import|export)\s/.test(content)) return "javascript";
        return "javascript";
    }

    function createComponentTree(data) {
        const ul = document.createElement('ul');
        ul.className = 'tree';

        data.forEach(item => {
            const li = document.createElement('li');
            li.className = 'tree-item';

            if (item.children && item.children.length > 0) {
                const toggle = document.createElement('span');
                toggle.className = 'toggle-button';
                toggle.textContent = '-';

                const childTree = createComponentTree(item.children);

                toggle.addEventListener('click', () => {
                    childTree.classList.toggle('hidden');
                    toggle.textContent = childTree.classList.contains('hidden') ? '+' : '-';
                });

                li.appendChild(toggle);
                li.appendChild(document.createTextNode(item.name));
                li.appendChild(childTree);
            } else {
                li.textContent = item.name;
            }

            ul.appendChild(li);
        });

        return ul;
    }

    function createTreeView(containerId, data) {

        const container = document.getElementById(containerId);

        function createNode(node) {
            const div = document.createElement('div');
            div.className = 'tree-node';

            const titleDiv = document.createElement('div');
            titleDiv.className = 'node-title';

            let childrenDiv = null;
            if (node.children && node.children.length > 0) {
                const toggleBtn = document.createElement('button');
                toggleBtn.className = 'toggle-btn';
                toggleBtn.innerHTML = `
        <svg class="icon minus" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
        </svg>
      `;

                childrenDiv = document.createElement('div'); // Initialize childrenDiv
                childrenDiv.className = 'node-children';

                node.children.forEach(child => {
                    childrenDiv.appendChild(createNode(child));
                });

                toggleBtn.onclick = () => {
                    const isExpanded = childrenDiv.style.display !== 'none';
                    childrenDiv.style.display = isExpanded ? 'none' : 'block';
                    toggleBtn.innerHTML = isExpanded ?
                        `<svg class="icon plus" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
           </svg>` :
                        `<svg class="icon minus" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
           </svg>`;
                };

                titleDiv.appendChild(toggleBtn);
            }

            const titleSpan = document.createElement('span');
            titleSpan.textContent = node.title;
            titleDiv.appendChild(titleSpan);

            div.appendChild(titleDiv);
            if (childrenDiv) {
                div.appendChild(childrenDiv);
            }

            return div;
        }

        container.appendChild(createNode(data));
    }

    // if(document.getElementById('component_tree')){
    //     createTreeView(document.getElementById('component_tree'), {})
    // }



    window.addEventListener("resize", () => {
        // cmInstance.refresh();
        resetIframeSize();
    });

    const hidden_editors = document.querySelectorAll(".hidden-editor")

    document.querySelectorAll('.language-javascript').forEach((block, index) => {
          block.innerHTML = escapeBrackets(hidden_editors[index].value)
    });

    document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("spinner").style.display = "none";
    });

</script>

</body>
</html>
